<template>
<view>
<!-- pages/article/detail/detail.wxml -->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <view v-if="showLoading">
    <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154803_84976.gif" mode="widthFix" style="width: 100%;"></image>
  </view>
  <view class="body" v-else>
    <view style="margin: 0 30rpx;">
      <view v-for="(item, index) in head" :key="index" :class="'fuwu ' + (showHead ? '' : 'baike-head')" @tap="seeBtn" :data-index="index" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">
        <view class="fw-content">
          <image :src="showHead ? item.logo : ''"></image>
          <view class="fw-text">
            <view>{{item.title}}</view>
            <text v-if="showHead">{{item.description}}</text>
          </view>
          <view class="baike">专题</view>
        </view>
        <view class="see">点击查看</view>
      </view>
      <text class="title">{{data.title}}</text>
      <view class="timebox">
        <text>{{data.publictime}}</text>
        <text>{{data.write}}</text>
      </view>
      <view class="intro-box" v-if="(data.guide!='' && type!='bsy')?true:false">
        <view class="text">
          <text class="intro-text">导语</text>
          {{data.guide}}
        </view>
      </view>
      <!-- 内容块 -->
      <view class="content-box">
        <mp-html :selectable="true" :copy-link="false" @linktap="linkTap" :content="data.content[page-1].content"></mp-html>
      </view>
      <!-- 推荐服务 -->
      <view style="margin-top:40rpx;" v-if="toolArray">
        <view v-for="(item, index) in toolArray" :key="index" class="fuwu" @tap="seeBtn" :data-index="index" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">
          <view class="fw-content">
            <image :src="item.logo"></image>
            <view class="fw-text">
              <view>{{item.title}}</view>
              <text>{{item.description}}</text>
            </view>
          </view>
          <view class="see">点击查看</view>
        </view>
        <image class="app" mode="aspectFit" v-if="appImg" :src="appImg"></image>
      </view>
      <ad unit-id="adunit-0bbb6e9e03970bcb"></ad>
      <!-- <ad unit-id="adunit-65bbf628e8c2ef75" ad-type="video" ad-theme="white"></ad> -->
      <view class="share-box row col center">
        <view class="share-box-title">
          <text>————</text>
          <text>分享到</text>
          <text>————</text>
        </view>
        <view class="shar-box-list row center around">
          <button class="shar-box-item row col center" open-type="share">
            <image src="http://imgbdb3.bendibao.com/whbdb/202010/15/20201015205407_98502.png" class="share-box-img"></image>
            <text class="share-box-path">微信好友</text>
          </button>
          <button class="shar-box-item row col center" @tap="shareBtn">
            <image src="http://imgbdb3.bendibao.com/whbdb/202010/15/20201015205354_33413.png" class="share-box-img"></image>
            <text class="share-box-path">朋友圈</text>
          </button>
        </view>
      </view>
    </view>
    <!-- 热搜榜 -->
    <navigator url="/pages/hotmessage/hotmessage" class="hot" v-if="hotMessage">
      <view class="hot-item">
        <image src="/static/images/hot.png" class="hot-icon"></image>
        <view class="hot-content">{{hotMessage}}</view>
      </view>
    </navigator>
    <!-- 猜你想搜 -->
    <view class="guess-border">
      <view class="title-box">
        <view class="title">
          <!-- <view class="sline"></view> -->
          <image src="/static/images/dbline.png"></image>
          <text>猜你想搜</text>
        </view>
      </view>
      <view class="guess">
        <navigator v-for="(item, index) in guessList" :key="index" :url="'/pages/search/search?keywords=' + item" class="guess-item">
          {{item}}
        </navigator>
      </view>
    </view>
    <!-- 相关阅读 -->
    <view class="sy-box more-message" v-if="recommlist!=''">
      <view class="title-box">
        <view class="title">
          <image src="/static/images/dbline.png"></image>
          <text>更多资讯</text>
        </view>
      </view>
      <navigator v-for="(item, index) in recommlist" :key="index" class="content" :url="'../detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">
        <view class="title">
          <text class="index">{{index + 1}}</text>
          <text>{{item.title}}</text>
        </view>
      </navigator>
      <view class="more-content">
        <view class="chanle">来自{{data.sitename}}频道</view>
        <view class="more-control" @tap="seeMore">查看更多 ></view>
      </view>
    </view>
    <!-- 最新阅读 -->
    <view class="sy-box" v-if="newlist!=''">
      <view class="title-box">
        <view class="title">
          <!-- <view class="sline"></view> -->
          <image src="/static/images/dbline.png"></image>
          <text>最新阅读</text>
        </view>
      </view>
      <navigator v-for="(item, index) in newlist" :key="index" class="content new-content" :url="'../detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">
        <view class="title new-title">
          <text>{{item.title}}</text>
          <text class="time">{{item.publictime}}</text>
        </view>
        <image :src="item.images" v-if="item.images" mode="aspectFill"></image>
      </navigator>
    </view>
    <!-- 底部空白 -->
    <view style="height:190rpx;"></view>
    <!-- 快捷导航 -->
    <!-- qrcodeimg="{{wxurl?wxurl:(qrcode?qrcode:qrcodeimg)}}" -->
    <fastnav :qrcode="qrcode" :citycode="citycode" :showNav="showNav" :platform="platform"></fastnav>
    <!-- 收藏与分享 -->
  </view>
  <view class="fastNav-box">
    <navigator class="flex-col" hover-class="none" url="/pages/index/index" open-type="switchTab">
      <image src="/static/images/home.png" style="width:34rpx;height:34rpx;"></image>
      <text>首页</text>
    </navigator>
    <button class="flex-col" @tap="collectBtn" :data-id="data.id">
      <image style="width:34rpx;height:34rpx;" :src="isCollect ?'/static/images/soucang.png':'/static/images/detail/null.png'"></image>
      <text>{{isCollect?"已收藏":"收藏"}}</text>
    </button>
    <view class="flex-col" open-type="share" style="margin-right: 0;" @tap="openShare">
      <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014191457_84285.png" style="width:34rpx;height:34rpx;"></image>
      <text>分享</text>
    </view>
  </view>
  <view class="bottom-mask" v-if="openShare"></view>
  <view class="bottom-share-box flex col" v-if="openShare">
    <view class="flex around">
      <button class="shar-box-item row col center" open-type="share">
        <image src="http://imgbdb3.bendibao.com/whbdb/202012/4/20201204171442_36037.png" mode="aspectFit" class="share-box-img"></image>
        <text class="share-box-path">分享给好友</text>
      </button>
      <view class="line"></view>
      <button class="shar-box-item row col center" @tap="shareBtn">
        <image src="http://imgbdb3.bendibao.com/whbdb/202012/4/20201204171504_27664.png" mode="aspectFit" class="share-box-img"></image>
        <text class="share-box-path">分享到朋友圈</text>
      </button>
    </view>
    <view class="cancel" @tap="closeShare">取消</view>
  </view>
</view>
<!-- 收藏小程序提示 -->
<view class="cue-box" v-if="indexCue">
  <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154118_24834.png"></image>
</view>
<popupshare :showModalStatus="showModalStatus" :articleData="articleData"></popupshare>
</view>
</template>

<script>
// pages/article/detail/detail.js
const app = getApp();
const util = require("../../../utils/util.js");
var pageNo;
import fastnav from "../../../component/fastnav/fastnav";
import popupshare from "../../../component/shareMoments/shareMoments";
import mpHtml from "../../../component/mp-html/index";

export default {
  data() {
    return {
      page: 1,
      pagecount: 1,
      showModalStatus: false,
      showNav: true,
      // 快捷导航是否展开
      showtk: false,
      // 是否显示外链客服弹框
      // showLink: false, // 是否显示复制链接弹框
      islongTap: false,
      // 判断长按复制点击事件是否可用
      // qrcodeimg: app.extConfig.qrcodeimg,
      collectCue: false,
      indexCue: true,
      recommlist: [],
      newlist: [],
      tAppid: app.globalData.tAppid,
      textraData: app.globalData.textraData,
      pageNo: 0,
      nodeData: [],
      showLoading: true,
      hotMessage: "",
      guessList: [],
      contentid: "",
      appImg: "",
      showHead: true,
      openShare: false,
      isCollect: false,
      //是否收藏
      platform: "wx" // 用于判断运行环境，QQ浏览器单独过滤
      // canIUse: wx.canIUse('button.open-type.getUserInfo')
      ,
      head: [],
      toolArray: [],
      citycode: "",
      qrcode: "",
      articleData: "",
      showIndex: false,
      navHeight: 0,
      type: "",
      scene: "",
      city: "",
      articleId: "",
      linkData: "",
      title: "",
      data: "",
      author: "",
      site: {},
      collectValue: "",
      collectFlag: "",
      scData: "",
      imageArray: ""
    };
  },

  components: {
    fastnav,
    popupshare,
    mpHtml
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    pageNo = 0;
    if (getCurrentPages().length > 1) this.setData({
      showIndex: true
    });else this.setData({
      showIndex: false,
      navHeight: 350
    });

    if (options.city == "wenda") {
      uni.redirectTo({
        url: '/pages/article/detail/detail?id=' + options.id + '&city=sz' + '&type=wenda'
      });
    }

    var sceneData = [];

    if (options.scene != undefined) {
      var scene = decodeURIComponent(options.scene);
      var arrPara = scene.split("/");

      for (var i in arrPara) {
        sceneData.push(arrPara[i]);
      }
    }

    this.setData({
      contentid: sceneData[0] ? sceneData[0] : options.id ? options.id : '',
      citycode: sceneData[1] ? sceneData[1] : options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz',
      type: sceneData[2] ? sceneData[2] : options.type ? options.type : '',
      scene: options.scene != undefined ? options.scene : 0
    });
    uni.setStorageSync('citycode', this.citycode);
    util.getUrl(app.globalData.url).then(() => {
      util.cityList().then(res => {
        let citydata;
        if (res.allcity && Array.isArray(res.allcity)) citydata = res.allcity.filter(v => v.citycode == this.citycode);
        let cityname = citydata && Array.isArray(citydata) && citydata[0] ? citydata[0].cityname : uni.getStorageSync("city");
        this.setData({
          city: cityname
        });
        uni.setStorageSync('city', this.city);
      }); // 热搜

      util.request('phb.php', {
        citycode: this.citycode
      }, "GET").then(res => {
        if (res.data && Array.isArray(res.data)) {
          if (res.data.length > 0) {
            let hotmessage = res.data.splice(0, 3);
            let index = 0;
            this.setData({
              hotMessage: hotmessage[0].title
            });
            setInterval(() => {
              ++index;
              if (!hotmessage[index]) index = 0;
              this.setData({
                hotMessage: hotmessage[index].title
              });
            }, 4000);
          }
        }
      });
    });

    if (uni.getStorageSync("indexCue")) {
      this.setData({
        indexCue: false
      });
    }
  },

  onShow() {
    util.getUrl(app.globalData.url).then(res => {
      this.getContentData();
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.data ? this.data.title : '',
      imageUrl: this.data ? this.data.images : '',
      path: 'pages/article/detail/detail?id=' + this.contentid + '&city=' + this.citycode + '&type=' + this.type
    };
  },
  onShareTimeline: function () {
    return {
      title: this.data ? this.data.title : '',
      imageUrl: this.data ? this.data.images : 'http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg'
    };
  },
  methods: {
    // 内容的接口
    getContentData() {
      let contData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'content',
        id: this.contentid,
        path: "article"
      }; // 判断是否是QQ浏览器环境

      if (uni.getSystemInfoSync().host && uni.getSystemInfoSync().host.env === "SDK" && uni.getSystemInfoSync().host.appId === "wx64f9cf5b17af074d") {
        this.setData({
          platform: "qq"
        });
      }

      util.request('index.php', contData, 'GET', this.platform).then(res => {
        if (res.data && res.data.app) this.setData({
          appImg: res.data.app
        });

        if (res.data.content) {
          let nodeData = res.data.content[0].content;
          let typelink = res.data.content[0].links.filter(v => v.type == 'link');

          if (typelink.length > 0) {
            this.setData({
              islongTap: true
            });
          }

          let collectValue = {
            "id": res.data.id,
            "title": res.data.title,
            "classid": res.data.classid,
            "classname": res.data.classname,
            "images": res.data.images,
            "publictime": res.data.publictime,
            "nav": res.data.pagetype
          };
          collectValue = encodeURIComponent(JSON.stringify(collectValue));
          this.setData({
            articleId: res.data.id,
            nodeData,
            linkData: res.data.content[0].links,
            title: res.data.title,
            data: res.data,
            author: res.data.author,
            qrcode: res.data.qrcode ? res.data.qrcode : '',
            site: {
              'id': res.data.siteid,
              'wapname': res.data.sitename
            },
            collectValue: collectValue,
            articleData: {
              id: this.contentid,
              city: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
              title: res.data.title,
              guide: res.data.guide ? res.data.guide : ''
            }
          });
          if (res.data.title) uni.setNavigationBarTitle({
            title: res.data.title
          });

          if (!this.isCollect) {
            this.isCollect(res.data.id);
          }

          this.getrecommlist(res.data.siteid, res.data.keywords);
          this.getnewlist(res.data.siteid);
          let guessList = res.data.tag ? res.data.tag.split(',') : [];

          if (res.data.keywords) {
            this.getToolData(res.data.keywords);
            guessList.unshift(res.data.keywords);
          }

          this.setData({
            guessList
          });

          if (res.data.keywords) {
            this.getToolData(res.data.keywords);
          }

          let sceneData = uni.getLaunchOptionsSync().scene; // 文章数据统计

          uni.reportAnalytics('statistical_article', {
            article_id: Number(this.contentid),
            article_city: this.citycode,
            article_type: this.type,
            title: this.title,
            article_scene: Number(this.scene ? this.scene : sceneData),
            article_write: this.author
          });
          this.setData({
            showLoading: false
          }); // 添加足迹

          let footList = uni.getStorageSync("footList") ? uni.getStorageSync("footList") : [];
          let index = footList.findIndex(item => {
            return item.id == this.contentid;
          });

          if (index >= 0) {
            let temp = footList[index];
            footList.splice(index, 1);
            footList.unshift(temp);
          } else {
            footList.unshift({
              id: this.contentid,
              type: this.type,
              month: new Date().getMonth() + 1,
              year: new Date().getFullYear(),
              day: new Date().getDate(),
              date: util.formatTime(new Date()),
              title: this.title
            });
          }

          uni.setStorageSync("footList", footList);
        }
      });
    },

    // 富文本内容可点击的标签
    linkTap(e) {
      let url = e.detail.href;

      if (this.linkData != '') {
        let urlRes = [];
        urlRes = this.linkData.filter((v, k) => {
          var str = v.url;
          str = str.replace(/&amp;/g, "&");

          if (str == url) {
            return v;
          } // if (v.id != 0 && v.url == url) {
          //   return v
          // }

        });

        if (urlRes != '') {
          let id = urlRes[0].id;
          let type = urlRes[0].type;
          let citycode = urlRes[0].city ? urlRes[0].city : this.citycode;

          if (id != 0) {
            uni.navigateTo({
              url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
            });
          } else {
            if (url.indexOf("mp.weixin.qq.com") != -1) {
              uni.navigateTo({
                url: '/pages/webview/webview?path=' + encodeURIComponent(url)
              });
            } else {
              this.setData({
                showtk: true
              });
              util.navContact(url, url);
            }
          }
        } else {
          util.navContact(url, url);
        }
      }
    },

    link: function (e) {
      let id = e.currentTarget.dataset.id;
      let title = e.currentTarget.dataset.title;
      let url = e.currentTarget.dataset.url;
      let type = e.currentTarget.dataset.type;
      let citycode = e.currentTarget.dataset.citycode;

      if (id != 0 && url == "") {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
        });
      } else {
        if (url.indexOf("mp.weixin.qq.com") != -1) {
          uni.navigateTo({
            url: '/pages/webview/webview?path=' + encodeURIComponent(url)
          });
        } else {
          this.setData({
            showtk: true
          });
          util.navContact(title, url);
        }
      }
    },

    // 相关工具服务接口
    getToolData(toolname) {
      let toolData = {
        action: "tools",
        city: this.city ? this.city : uni.getStorageSync("city"),
        keywords: toolname,
        version: app.globalData.version,
        type: "detail",
        size: 5,
        path: "article",
        valueid: this.contentid,
        pagetype: this.data.pagetype
      };
      util.request('service.php', toolData).then(res => {
        if (res.data.state && res.data.data) {
          let head;
          res.data.data.forEach((tool, index) => {
            if (tool.path.includes("topicality/subtopic/subtopic")) head = res.data.data.splice(index, 1);
          });
          this.setData({
            toolArray: res.data.data,
            head
          });
        }
      });
    },

    // 相关阅读的接口
    getrecommlist(siteid, keywords) {
      let recommData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        pagesize: 5,
        siteid: siteid,
        keywords: keywords,
        city: this.city ? this.city : uni.getStorageSync("city"),
        notid: this.contentid,
        path: "article"
      };
      util.request('index.php', recommData, 'GET').then(res => {
        this.setData({
          recommlist: res.data
        });
      });
    },

    // 最新阅读的接口
    getnewlist(siteid) {
      let newData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        pagesize: 5,
        siteid: siteid,
        path: "article",
        city: this.city ? this.city : uni.getStorageSync("city")
      };
      util.request('index.php', newData, 'GET').then(res => {
        this.setData({
          newlist: res.data
        });
      });
    },

    // 判断是否已收藏
    isCollect(id) {
      let data = {
        action: "collect",
        option: "check",
        user_id: uni.getStorageSync("user_id"),
        valueid: id,
        openid: uni.getStorageSync("openid")
      };
      util.request('user.php', data, 'POST').then(res => {
        let isCollect = res.data.state == 1 ? true : false;
        let collectFlag = res.data.state;
        let scData = res.data.data;
        this.setData({
          isCollect,
          collectFlag,
          scData
        });
      });
    },

    // 取消（删除）收藏
    delCollect(id) {
      this.setData({
        isCollect: false
      });
      uni.showToast({
        title: "取消收藏"
      }); // if (this.data.scData != '') {
      //     let scid = this.data.scData.id;

      let data = {
        action: "collect",
        option: "del",
        openid: uni.getStorageSync("openid"),
        // user_id: wx.getStorageSync("user_id"),
        valueid: id
      };
      util.request('user.php', data, 'POST').then(res => {// if (res.data.state == 1) {
        //     wx.showToast({
        //         title: "取消收藏"
        //     })
        // }
      }); // }
    },

    // 收藏按钮
    collectBtn(e) {
      let id = e.currentTarget.dataset.id;

      if (uni.getStorageSync("user_id")) {
        if (!this.isCollect) {
          uni.navigateTo({
            url: `/pages/collect/collect?ids=${this.contentid}&value=${this.collectValue}`
          });
        } else {
          this.delCollect(id);
        }
      } else {
        uni.showModal({
          title: '温馨提示',
          content: '暂未登录，请登录',
          showCancel: true,
          cancelText: '取消',
          cancelColor: '#000000',
          confirmText: '确定',
          confirmColor: '#3CC51F',
          success: result => {
            if (result.confirm) {
              uni.navigateTo({
                url: '/pages/mine/login/login'
              });
            }
          }
        });
      }

      if (!uni.getStorageSync("collectCue")) {
        uni.showModal({
          content: '返回首页后，点击“我的”即可查看已收藏的内容。',
          showCancel: false,
          confirmText: "我知道了"
        });
      }

      uni.setStorageSync("collectCue", "collectCue");
    },

    // 查看文章图片事件
    showImg() {
      let arr = [];

      if (this.data) {
        let allSrc = this.data.content[0].images;

        for (let i = 0; i < allSrc.length; i++) {
          arr.push(allSrc[i]);
          this.setData({
            imageArray: arr
          });
        }

        setTimeout(() => {
          uni.previewImage({
            current: this.imageArray,
            // 当前显示图片的http链接   
            urls: this.imageArray // 需要预览的图片http链接列表   

          });
        }, 500);
      }
    },

    // 查看工具服务专题
    seeBtn(e) {
      let path = e.currentTarget.dataset.path;
      let appid = e.currentTarget.dataset.appid;
      let linkname = e.currentTarget.dataset.title;
      let index = e.currentTarget.dataset.index;
      let data = this.toolArray[index];
      let title = util.getValue("title", e);

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        if (path.includes("topicality")) {
          let scene = util.getScene(uni.getLaunchOptionsSync().scene);
          util.navMethod(path, appid, title, scene);
        } else util.navMethod(path, appid);
      }
    },

    // 外链进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 外链弹框关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    // 分享按钮
    shareBtn(e) {
      this.setData({
        showModalStatus: true,
        openShare: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      if (e.scrollTop > 10 && this.showHead) {
        this.setData({
          showHead: false
        });
      } else if (e.scrollTop < 6 && !this.showHead) {
        this.setData({
          showHead: true
        });
      }

      if (!uni.getStorageSync("indexCue")) {
        uni.setStorageSync("indexCue", "indexCue");
      }

      if (this.showNav) this.setData({
        showNav: false
      });
      if (!this.showNav && !this.indexCue) this.setData({
        showNav: false,
        indexCue: false
      });
    },

    openShare() {
      this.setData({
        openShare: true
      });
    },

    closeShare() {
      this.setData({
        openShare: false
      });
    },

    seeMore() {
      if (this.type == "bsy") {
        uni.navigateTo({
          url: `/pages/article/list/list?id=${this.data.classid}&type=${this.data.pagetype}&city=${this.citycode}&menuIndex=0`
        });
      } else {
        uni.navigateTo({
          url: `/pages/article/channel/channel?id=${this.data.siteid}&type=${this.data.pagetype}&city=${this.citycode}`
        });
      }
    }

  }
};
</script>
<style>
/* pages/article/detail/detail.wxss */


.title {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(53, 53, 53, 1);
    line-height: 68rpx;
}

.logo-box {
    border-top: 1rpx solid #CCCCCC;
    border-bottom: 1rpx solid #CCCCCC;
    padding: 30rpx 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 15rpx;
}

.time {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
}

.logocont1 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.logocont1 image {
    width: 82rpx;
    height: 82rpx;
    border-radius: 6rpx;
    border: 3rpx solid #ff6600;
}

.concern {
    background: rgba(255, 102, 0, 1);
    border-radius: 6rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    padding: 10rpx 20rpx;
}

.intro-box {
    background: rgba(238, 238, 238, 1);
    padding: 20rpx;
    margin-top: 20rpx;
}

.intro-text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    background: rgba(153, 153, 153, 1);
    padding: 6rpx 30rpx;
    text-align: center;
}

.intro-box .text {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 50rpx;
}

.sy-box {
    margin: 0 30rpx;
    margin-top: 50rpx;
}

.title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.title image {
    width: 16rpx;
    height: 28rpx;
    margin-right: 10rpx;
}

.title text {
    font-size: 38rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(53, 53, 53, 1);
    line-height: 45rpx;
}

.sline {
    border-left: 10rpx solid #FF7F2A;
    height: 45rpx;
    margin-right: 15rpx;
}

.content {
    /* border-bottom: 1rpx solid #CCCCCC; */
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    margin-top: 10rpx;
}

.content .title {
    display: flex;
    /* flex-direction: column; */
    /* justify-content: space-between; */
    align-items: flex-start;
    flex: 1;
}

.content text {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.content image {
    width: 188rpx;
    height: 120rpx;
    border-radius: 4rpx;
    margin-left: 20rpx;
}

.content:last-child {
    border: 0;
}

.content-box {
    margin-top: 20rpx;
}

.timebox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

.timebox text {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
}


/* 相关链接 */

.links {
    padding: 0 20rpx;
    word-break: break-all;
    line-height: 40rpx;
    margin-top: 30rpx;
}

.links .links-title {
    color: #000;
    font-weight: bold;
}

.links .links-text {
    color: #f60;
    margin: 30rpx 0;
}


/* 回到首页 */

.back_index {
    position: fixed;
    bottom: 332rpx;
    right: 30rpx;
}

.back_index image {
    width: 122rpx;
    height: 122rpx;
}


/* 收藏和分享 */

.fixed {
    width: 100%;
    height: 125rpx;
    display: flex;
    align-items: center;
    justify-items: center;
    position: fixed;
    bottom: 0;
    border-top: 2rpx solid rgb(205, 205, 205);
    background-color: #FFFFFF;
    z-index: 2;
}

.bottom-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 234rpx;
    margin-left: 30rpx;
    padding: 10rpx 0;
    color: #141414;
    background: #FFFFFF;
}

.bottom-box:nth-child(2) {
    border-left: 2rpx solid #CCC;
    border-right: 2rpx solid #CCC;
    border-radius: 0;
}

.bottom-box:last-child {
    margin: 0 10rpx;
}

.bottom-box text {
    padding-bottom: 5rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    opacity: 1;
}

.bottom-box image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 13rpx;
}

button {
    line-height: 0;
}


/* 推荐服务 */

.fuwu {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.08);
    opacity: 1;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 50rpx 20rpx 30rpx;
    margin-bottom: 15rpx;
}

.fw-content {
    position: relative;
    display: flex;
    align-items: center;
}

.fw-content image {
    width: 88rpx;
    height: 88rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.fw-text {
    display: flex;
    flex-direction: column;
    margin-right: 25rpx;
}

.fw-text view {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(20, 20, 20, 1);
    opacity: 1;
    margin-bottom: 10rpx;
}

.fw-text text {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 34rpx;
    color: rgba(149, 149, 149, 1);
    opacity: 1;
}

.see {
    background: rgba(255, 102, 0, 1);
    opacity: 1;
    border-radius: 6rpx;
    font-size: 18rpx;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    color: rgba(255, 255, 255, 1);
    padding: 10rpx 20rpx;
    white-space: nowrap;
}

.p_class {
    margin: 20rpx 0;
    line-height: 70rpx;
}

.table_class {
    border-collapse: collapse;
    background: #f60
}

.td_class {
    border: 1rpx solid #000;
    width: 300rpx;
    border-collapse: collapse;
    padding: 0rpx 14rpx;
    text-align: center;
}



/* .table_class tr{width: auto;height: auto;}
.table_class td{width: auto;height: auto;} */


/* 复制文章链接 */

.link-box {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.link-content {
    width: 80%;
    height: 50%;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    padding: 15rpx 30rpx;
    position: relative;
}

.link-content .cure {
    margin-top: 40rpx;
    font-weight: bold
}

.linkstyle {
    border-bottom: 1rpx solid #CCCCCC;
    padding-bottom: 20rpx;
    margin-top: 30rpx;
    display: flex;
    flex-direction: column;
}

.linkstyle text {
    word-break: break-all;
    width: 600rpx;
}


/* 提示收藏 */

.scue-box {
    background: rgba(46, 45, 45, 0.9);
    position: fixed;
    top: 60%;
    left: 4%;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 90%;
    height: 60rpx;
    color: #FFFFFF;
    text-align: center;
    line-height: 60rpx;
    border-radius: 10rpx;
}


/* 收藏小程序的提示 */

.cue-box {
    position: fixed;
    top: 0rpx;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    right: 88rpx;
}

.cue-box image {
    width: 554rpx;
    height: 83rpx;
}

.app {
    width: 100%;
}

.hot {
    margin: 0 40rpx;
}

.hot-item {
    height: 84rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    background-color: rgb(245, 245, 245);
    border-radius: 18rpx;
}

.hot-content {
    max-width: 526rpx;
    margin-left: 15rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.hot-icon {
    width: 22rpx;
    height: 29rpx;
}

.guess {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 30rpx;
    padding-bottom: 36rpx;
    margin-top: 30rpx;
    border-bottom: 10rpx solid #EEEEEE;
}

.guess .guess-item:nth-child(odd) {
    margin-right: 24rpx;
}

.guess-item {
    height: 100rpx;
    width: 38%;
    padding: 0 26rpx;
    margin-bottom: 12rpx;
    line-height: 100rpx;
    font-size: 22rpx;
    color: #7A7A7A;
    text-align: center;
    background-color: #EEEEEE;
    border-radius: 18rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.more-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 21rpx;
    margin-top: 19rpx;
    font-size: 24rpx;
    border-top: 2rpx solid #E7E7E7;
}

.chanle {
    color: #A8A8A8;
}

.more-control {
    color: #2880E3;
}

.more-message {
    margin: 0;
    margin-top: 36rpx;
    padding: 0 30rpx;
    padding-bottom: 38rpx;
    border-bottom: 10rpx solid #EEEEEE;
}

.content:nth-child(2) .title .index {
    color: #FE1A29;
}

.conten:nth-child(3) .title .index {
    color: #FF893A;
}

.content:nth-child(4) .title .index {
    color: #FFAB3A;
}

.content .title {
    display: flex;
    align-items: flex-start;
    flex: 1;
}

.content text {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
}

.content image {
    width: 198rpx;
    height: 144rpx;
    border-radius: 12rpx;
    margin-left: 20rpx;
}

.content:last-child {
    border: 0;
}

.content-box {
    margin-top: 20rpx;
    line-height: 60rpx;
}
.content-box rich-text ,.content-box ._p{
    margin:  32rpx 0;
    line-height: 60rpx;
    display: block;
}

.content .title .index {
    font-size: 30rpx;
    margin-right: 20rpx;
    color: #B6B6B6;
}

.new-title {
    flex-direction: column;
}

.fastNav-box {
    position: fixed;
    bottom: 0rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 96rpx;
    padding: 14rpx 0;
    background-color: #FFFFFF;
    background: #EFEFEF;
}

.fastNav-box button {
    background-color: transparent;
    line-height: 2;
    margin: 0;
}

.fastNav-box .flex-col {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 214rpx;
    height: 70rpx;
    margin-right: 14rpx;
    border-radius: 10rpx;
    background-color: #FFFFFF;
}

.fastNav-box .flex-col text {
    margin-left: 10rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    white-space: nowrap;
    font-weight: 500;
    color: #4B4B4B;
}

.new-content {
    padding-bottom: 19rpx;
    border-bottom: 2rpx solid #F0F0F0;
}

.new-title .time {
    font-size: 22rpx;
    color: #989696;
}

.guess-border {
    margin-top: 50rpx;
    padding-top: 30rpx;
    border-top: 10rpx solid #EEEEEE;
}

button {
    padding: 0;
    margin: 0;
    background-color: transparent;
}

.share-box {
    margin-bottom: 60rpx;
    margin-top: 40rpx;
}

.share-box-img {
    width: 100rpx;
    height: 100rpx;
}

.shar-box-item {
    line-height: normal;
}

.share-box-title {
    width: 100%;
    margin-bottom: 58rpx;
    font-size: 32rpx;
    color: #BFBFBF;
    text-align: center;
}

.share-box-path {
    font-size: 22rpx;
    color: #141414;
}

.shar-box-list {
    width: 70%;
}

.guess-border .title {
    padding-left: 30rpx;
}

.baike {
    position: absolute;
    padding: 2rpx;
    left: 0;
    top: 0;
    font-size: 20rpx;
    background-color: #FF6600;
    color: #FFFFFF;
}

.baike-head {
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 99;
}

.baike-head image {
    width: 44rpx;
    height: 44rpx;
}

.baike-head .baike {
    padding: 4rpx
}

.bottom-mask {
    position: fixed;
    bottom: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, .4);
}

.bottom-share-box {
    position: fixed;
    bottom: 0;
    height: 380rpx;
    width: 100%;
    justify-content: space-between;
    padding-top: 80rpx;
    background-color: rgb(251, 253, 250);
    border-top-left-radius: 54rpx;
    border-top-right-radius: 54rpx;
    overflow-x: hidden;
}

.bottom-share-box .flex {
    padding: 20rpx 20%;
    z-index: 99;
    box-sizing: border-box;
}

.bottom-share-box .share-box-img {
    width: 100rpx;
    margin-bottom: 16rpx;
}

.bottom-share-box .share-box-path {
    font-size: 24rpx;
}

.bottom-share-box .flex {
    width: 100%;
}

.line {
    height: 60rpx;
    border-right: 2rpx solid #ccc;
}

.cancel {
    width: 100%;
    height: 102rpx;
    margin-top: 30rpx;
    line-height: 102rpx;
    font-size: 34rpx;
    text-align: center;
    background-color: #FFFFFF;
}
</style>